<template>
  <div class="money-more">
    <div class="head clearfix">
      <span>收支明细</span>
      <a href="#/personal/money/index">《返回</a>
    </div>
    <ul v-loading.body="loading">
      <money-item :value="item" v-for="item,i in deal_record" :key="i"></money-item>
    </ul>
    <div class="pagination-container">
      <el-pagination
        v-if="deal_record && deal_record.length !== 0"
        :page-size="offset"
        layout="prev, pager, next"
        :total="total"
        @current-change="handlePageChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import MoneyItem from './../moneyItem.vue'
import { getDealRecord } from 'api/user'
export default {

  name: 'more',
  components: {
    MoneyItem
  },
  data() {
    return {
      deal_record: [],
      page: 1,
      offset: 10,
      loading: false
    };
  },
  created() {
    this.loading = true
    getDealRecord({
      page: 1
      // offset: 10
    })
    .then(res => {
      this.loading = false
      this.deal_record = res.deal_record
      this.total = res.page.last_page * this.offset
    })
    .catch(err => {
      console.log(err)
      this.laoding = false
    })
  },
  methods: {
    fetchData(params = {}) {
      this.loading = true
      getDealRecord({
        page: this.page,
        // offset: this.offset,
        ...params
      })
      .then(res => {
        this.loading = false
        this.deal_record = res.deal_record
        this.total = res.page.last_page * this.offset
      })
      .catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    // 分页
    handlePageChange(page) {
      this.page = page
      this.fetchData(page)
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.money-more{
  .head{
    line-height: 50px;
    border-bottom: 1px solid #e5e6e7;
    >span{
      font-size: 14px;
      float: left;
    }
    >a{
      font-size: 12px;
      float: right;
      color: #999;
    }
  }
}
</style>